<template>
  <common-list-tabs>
    <common-tabs slot="tabs" v-model="page" @tab-click="tabChange">
      <el-tab-pane
        label="按库"
        name="common-statistics"
        v-if="tabPermission.tabStatistics"
      ></el-tab-pane>
      <el-tab-pane
        label="按表"
        name="common-table"
        v-if="tabPermission.tabTable"
      ></el-tab-pane>
      <el-tab-pane
        label="按列"
        name="common-column"
        v-if="tabPermission.tabColumn"
      ></el-tab-pane>
    </common-tabs>
    <component
      slot="content"
      :is="page"
      :key="page"
      @change="change"
      :params="params"
    ></component>
  </common-list-tabs>
</template>

<script>
import CommonStatistics from "./statistics";
import CommonTable from "./table";
import CommonColumn from "./column";
import { getHasPermission } from "@/utils/util";
import { mapGetters } from 'vuex';

export default {
  name: "index",
  data() {
    return {
      page: "",
      params: {},
      tabPermission: {
        tabStatistics: false,
        tabTable: false,
        tabColumn: false,
      },
    };
  },
  computed: {
    ...mapGetters(["systemInfo"]),
  },
  components: {
    CommonStatistics,
    CommonTable,
    CommonColumn,
  },
  mounted() {
    this.tabPermission.tabStatistics = this.systemInfo.isThird
      ? true
      : getHasPermission(["datascan:statistics:list"]);
    this.tabPermission.tabTable = this.systemInfo.isThird
      ? true
      : getHasPermission(["datascan:table:list"]);
    this.tabPermission.tabColumn = this.systemInfo.isThird
      ? true
      : getHasPermission(["datascan:column:list"]);

    if (this.tabPermission.tabStatistics) {
      this.page = "common-statistics";
    } else if (this.tabPermission.tabTable) {
      this.page = "common-table";
    } else if (this.tabPermission.tabColumn) {
      this.page = "common-column";
    }
  },
  methods: {
    change(to, params) {
      this.params = params;
      this.page = `common-${to}`;
    },
    tabChange() {
      this.params = {};
    },
  },
};
</script>

<style scoped lang="scss">
</style>
